<template>
  <div style="height: auto">
    <!-- 头部搜索 -->
    <el-card style="width: 100%; margin-bottom: 10px" shadow="never">
      <el-row>
        <el-col :span="3">
          <el-form-item label="订单号">
            <text style="font-size: 18px">{{ details.number || details.orderNumber}} </text>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="订单类型"> {{ details.orderType==1?'配送':'安装' }} </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="SMAS单号"> {{ details.sacId }} </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="关联订单">
            {{ details.mergedWithOrderNumber }}
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="接单员">{{ details.addtime }}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型描述">
            {{ details.codetext }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="客户名称">{{ details.name }} </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话">
            {{ details.phone }}
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="预约时间"
            >{{ details.periodsTime }}({{
              details.periods
            }})</el-form-item
          >
        </el-col>

        <el-col :span="4">
          <el-form-item label="类型" style="color: red !important">{{
            details.deliveryCode
          }}</el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="邮编" style="color: red !important">{{
            details.postalCode
          }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="送货地址">
            {{ details.address }}
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="内仓件数"> {{ details.sidestorage }} </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="外仓件数"> {{ details.outsidestorage }} </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item label="合计">{{ details.totalPackages }}</el-form-item>
        </el-col>
      </el-row>

      <!-- <el-row>
        <el-col :span="3">
          <el-form-item label="运费">0 元</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="宜家付费"> 0 元</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="包装费"> 0 元</el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item label="拆卸费">0元</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="加急费">0 元</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="其他费用">0 元</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="仓储费">0 元</el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="合计">0 元</el-form-item>
        </el-col>
      </el-row> -->
    </el-card>

    <!-- 表格数据展示 EEF7FD :data="tableData"  -->
    <el-divider content-position="left" v-if="details.orderType===1">货物信息</el-divider>
    <el-table border :data="details.goodsList" v-if="details.orderType===1" style="width: 100%; margin-top: 1%">
      <el-table-column
        prop="description"
        label="货物名称"
        align="center"
        width="400"
      ></el-table-column>
      <el-table-column
        prop="articleNumber"
        label="货号"
        align="center"
      ></el-table-column>
      <el-table-column prop="price" label="货值" align="center">
      </el-table-column>

      <el-table-column
        prop="parcelSequenceNo"
        label="CDU编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="quantity"
        label="件数"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="volume"
        label="体积"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="weight"
        label="重量"
        align="center"
      ></el-table-column>

      <el-table-column label="操作" align="center" width="100">
        损坏
      </el-table-column>
    </el-table>

    <el-divider content-position="left" style="margin-top: 1%" v-if="details.orderType===1"
      >包装信息</el-divider
    >
    <el-table
      border
      :data="details.packageList"
      style="width: 100%; margin-top: 1%"
      v-if="details.orderType===1"
    >
      <el-table-column
        prop="shipmentNumber"
        label="货物名称"
        align="center"
        width="300"
      ></el-table-column>

      <el-table-column
        prop="packageNumber"
        label="包装编号"
        align="center"
      ></el-table-column>
     
      <el-table-column
        prop="volume"
        label="体积"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="weight"
        label="重量"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="pickupLocation"
        label="取货地址"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="cancelled"
        label="是否取消"
        align="center"
      ></el-table-column>
      <el-table-column label="是否内退" align="center"></el-table-column>
    </el-table>

    <el-divider content-position="left" v-if="details.orderType===2">安装信息</el-divider>
    <el-table border :data="details.installMsgList" v-if="details.orderType===2" style="width: 100%; margin-top: 1%">
      <el-table-column
        prop="goodsname"
        label="货物名称"
        align="center"
      ></el-table-column>

      <el-table-column prop="goodsnumber" label="货号" align="center" width="300">
      </el-table-column>
      <el-table-column prop="goodsmoney" label="货值" align="center" width="300">
      </el-table-column>
      <el-table-column prop="quantity" label="件数" align="center" width="300">
      </el-table-column>
    </el-table>

    <el-divider content-position="left" v-if="details.orderType===2" style="margin-top: 1%"
      >服务信息</el-divider
    >
    <el-table
      border
      :data="details.serviceMsgList"
      style="width: 100%; margin-top: 1%"
      v-if="details.orderType===2"
    >
      <el-table-column
        prop="codetext"
        label="服务类型"
        align="center"
        width="300"
      ></el-table-column>

      <el-table-column
        prop="timewindowfrom"
        label="预约时间"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="servicenumber"
        label="货号"
        align="center"
      ></el-table-column>
     
      <el-table-column
        prop="status"
        label="状态"
        align="center"
      ></el-table-column>

      <el-table-column
        label="信息完整性"
        align="center"
      ></el-table-column>

      <el-table-column
        label="操作"
        align="center"
      ></el-table-column>
    </el-table>



    <el-divider content-position="left" style="margin-top: 1%"
      >订单状态</el-divider
    >

    <el-table border :data="details.stateList"   style="width: 100%; margin-top: 1%">
      <el-table-column
        prop="number"
        label="订单号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="type"
        label="状态"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="username"
        label="服务类型"
        align="center"
        v-if="details.orderType===2"
      ></el-table-column>

      <el-table-column
        prop="addtime"
        label="推送时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="uptype"
        label="推送状态"
        align="center"
      ></el-table-column>
 
      <el-table-column
        prop="username"
        label="操作人"
        align="center"
        v-if="details.orderType===1"
      ></el-table-column>
    </el-table>

    <el-divider content-position="left" style="margin-top: 1%"
      >派工信息</el-divider
    >

    <el-table border :data="details.disList" style="width: 100%; margin-top: 1%">
      <el-table-column
        prop="dispatchingNumber"
        label="配送单号"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="vehicleNumber"
        label="自编号"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="licenseNumber"
        label="车牌号码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="volume"
        label="体积"
        align="center"
      ></el-table-column>

      <!-- <el-table-column
        prop="weight"
        label="重量"
        align="center"
      ></el-table-column> -->

      <el-table-column
        prop="poll"
        label="票数"
        align="center"
      ></el-table-column>

      <el-table-column prop="weight" label="车组信息" align="center">
        <template #default="scope">
          <el-tag
            type="danger"
            v-for="item in scope.row.personnels"
            :key="item.id"
          >
            {{ item.name }} {{ item.position }} {{ item.tel }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="dispatcher"
        label="调度员"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="派工时间"
        align="center"
      ></el-table-column>
    </el-table>

  </div>
</template>
    
    <script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { findAllOrderById ,findOrderDetailsById} from "@/api/order";
const route = useRoute();

const details = ref({});
const id = ref();
id.value = route.query.id;
onMounted(() => {
  getList();
});

const getList = () => {
  findOrderDetailsById(id.value).then((res) => {
    if (res.code === 200 && res.data !== null) {
      details.value = res.data;
      console.log(details.value);
    }
  });
};
</script>
  <style scoped>
/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  border: 0;
  color: #135294;
}
/*去除底边框*/
::v-deep.el-table td.el-table__cell {
  border: 0;
}
::v-deep.el-table th.el-table__cell.is-leaf {
  border: 0;
}
/*去除底部灰条.el-table::before*/
::v-deep .el-table::before {
  display: none;
}
.el-pagination {
  text-align: center;
  justify-content: center;
  color: #135294;
}
::v-deep .el-pagination__sizes,
.el-pagination__total {
  color: #135294 !important;
}
::v-deep .el-pagination button {
  background-color: transparent !important;
}
::v-deep .el-pager li {
  background-color: transparent !important;
}
::v-deep .el-pagination button.is-disabled,
.el-pagination button:disabled {
  background-color: transparent !important;
}
::v-deep .el-pagination .el-select {
  width: 100px !important;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  color: #666;
}

::v-deep .el-form-item__content {
  font-size: 14px;
  color: #135294;
  font-weight: bold;
}
::v-deep .el-divider__text {
  background: transparent !important;
  color: #135294;
  font-weight: bold;
}
.el-form-item {
  margin-bottom: 5px;
}
</style>